// 导入EChart包
import * as echarts from "echarts";
// 定义EChart选项类型
type EChartsOption = echarts.EChartsOption;

// 导入React包
import { useEffect, useRef } from "react";

// 柱状图组件--传递组件参数用于自适应组件数据
const BarChart = (prop: { title: string }) => {
  //创建Ref引用EChart实例
  const EChartRef = useRef(null);

  //生命周期钩子函数，在组件挂载时初始化EChart实例
  useEffect(() => {
    const chartDom = EChartRef.current;
    const myChart = echarts.init(chartDom);

    // 配置EChart选项
    const option: EChartsOption = {
      title: {
        text: prop.title,
      },
      xAxis: [
        {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          type: "bar",
          data: [10, 52, 200, 334, 390, 330, 220],
        },
      ],
    };
    //渲染柱状图
    if (option) myChart.setOption(option);
  }, [prop]);
  return (
    <>
      <div ref={EChartRef} style={{ width: "500px", height: "400px" }}></div>
    </>
  );
};

export default BarChart;
